<!--
 * @Description: 
 * @Author: mxy
 * @Date: 2022-11-30 16:31:48
 * @LastEditors: mxy
 * @LastEditTime: 2022-12-03 20:07:06
-->
<template>
  <div>
    <h1>动态组件</h1>
    <button @click="comName = 'MyLeft'">left组件</button>
    <button @click="comName = 'MyRight'">right组件</button>
    <!-- 被keepalive包裹的组件都会保持状态 -->
    <keep-alive include="MyRight">
      <!-- component标签用来切换组件，控制动态组件 -->
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyLeft from "@/components/MyLeft.vue";
import MyRight from "@/components/MyRight.vue";
export default {
  components: { MyLeft, MyRight },
  data() {
    return {
      comName: "MyLeft",
    };
  },
};
</script>

<style>
</style>